<template>
  <div class="bg-gray">
    <an-nav-bar
      title="树形展示"
      @onClickLeft="onClickLeft"
      leftText="返回"
    ></an-nav-bar>
    <div class="box-scroll">
      <van-search
        v-model="filterText"
        placeholder="输入关键字进行过滤"
        show-action
        @search="handleSearch"
      >
        <template #action>
          <div @click="handleSearch">搜索</div>
        </template>
      </van-search>
      <vant-tree
        :data="filteredData"
        @node-select="handleNodeSelect"
      />
    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            count: '',
            filterText: '',
            selectedNode: null,
            originalData: [
                {
                    id: 1,
                    label: '一级 1',
                    parent: '01',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            parent: '0101',
                            children: [
                                { id: 9, label: '三级 1-1-1', parent: '010101', children: [] },
                                { id: 10, label: '三级 1-1-2', parent: '010102', children: [] }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: '一级 2',
                    parent: '02',
                    children: [
                        { id: 5, label: '二级 2-1', parent: '0201', children: [] },
                        { id: 6, label: '二级 2-2', parent: '0202', children: [] }
                    ]
                },
                {
                    id: 3,
                    label: '一级 3',
                    parent: '03',
                    children: [
                        { id: 6, label: '二级 2-2', parent: '0202', children: [] },
                        { id: 8, label: '二级 3-2', parent: '0302', children: [] }
                    ]
                }
            ],

            filteredData: []
        };
    },
    watch: {},
    created() {
        this.filteredData = this.originalData;
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        handleSearch() {
            this.filteredData = [];
            const lowerText = this.filterText;
            if (!lowerText) {
                this.filteredData = this.originalData;
                return;
            }
            const processNode = (node) => {
                const newNode = { ...node };
                const isMatch = node.label.includes(lowerText);
                if (node.children) {
                    newNode.children = node.children.map(processNode).filter((child) => child);

                    // 保留匹配节点或包含匹配子节点的父节点
                    if (newNode.children.length > 0 || isMatch) {
                        newNode.expanded = true;
                        return newNode;
                    }
                }
                return isMatch ? { ...newNode, expanded: true } : null;
            };
            // 执行过滤但不自动展开
            this.filteredData = this.originalData.map(processNode).filter((node) => node);
        },

        handleNodeSelect(node) {
            this.selectedNode = node;
        }
    }
};
</script>
